<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('拨款凭证')" />
	<th:block th:include="include :: select2-css" />
	<th:block th:include="include :: bootstrap-editable-css" />
	<th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
    <div class="main-content">
        <form id="form-tsbk-add" class="form-horizontal">
            <h4 class="form-header h3"><span style="color: red; "><label >拨款凭证</label></span></h4>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>拨款类型：</label>
                         <div class="col-sm-8">
                            <select name="bklx" id="bklx" class="form-control" required>
								 <option value="0">经济科目</option> 
								<option value="1">会计科目</option>
							</select>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>拨款日期：</label>
                        <div class="col-sm-8">
                           <input name="zfrq" id="zfrq"  placeholder="" class="form-control time-input" type="text" maxlength="30"  required>
                        </div>
                    </div>
                </div>
              
            	<div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>付款人名称：</label>
                        <div class="col-sm-8">
                            <input name="jkrmc" id="jkrmc" placeholder="" class="form-control" type="text"  required readonly>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>收款人名称：</label>
                        <div class="col-sm-8">
                            
                            	<input name="skrmc"  id="skrmc" type="text" placeholder="" class="form-control"  required >
                            
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>付款人账号：</label>
                        <div class="col-sm-8">
	                         <div class="input-group">
	                            <input id="jkrzh" name="jkrzh" onclick="selectFkyhTree()" placeholder="" class="form-control" type="text"  required readonly>
	                             <span class="input-group-addon"><i class="fa fa-search" onclick="selectFkyhTree()"></i></span>
	                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>收款人账号：</label>
                        <div class="col-sm-8">
	                         <div class="input-group">
	                            <input id="skrzh" name="skrzh" onclick="selectSkyhTree()" placeholder="" class="form-control" type="text"  required >
	                             <span class="input-group-addon"><i class="fa fa-search" onclick="selectSkyhTree()"></i></span>
	                        </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label">付款人银行：</label>
                        <div class="col-sm-8">
                            <input id="jkryh" name="jkryh" placeholder="" class="form-control" type="text"  maxlength="120" required readonly>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>收款人银行：</label>
                        <div class="col-sm-8">
                            <input id="skryh" name="skryh" placeholder="" class="form-control" type="text" required >
                        </div>
                    </div>
                </div>
            </div>
           <!-- 
            <div class="row">
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><span style="color: red; ">*</span>功能科目 ：</label>
                        <div class="col-sm-8">
	                         <div class="input-group">
	                            <input id="gnkmdm" name="gnkmdm" onclick="selectGnKmdmTree()" placeholder="" class="form-control" type="text"  required readonly>
	                             <span class="input-group-addon"><i class="fa fa-search" onclick="selectGnKmdmTree()"></i></span>
	                             <input id="gnkmmc" name="gnkmmc"  placeholder="" class="form-control" type="text"  required readonly>
	                        </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="form-group">
                        <label class="col-sm-4 control-label" id="jjname"><span style="color: red; ">*</span>经济科目：</label>
                        <div class="col-sm-8">
	                         <div class="input-group">
	                            <input id="jjkmdm" name="jjkmdm" onclick="selectJJKmdmTree()" placeholder="" class="form-control" type="text"  required readonly>
	                             <span class="input-group-addon"><i class="fa fa-search" onclick="selectJJKmdmTree()"></i></span>
	                             <input id="jjkmmc" name="jjkmmc"  placeholder="" class="form-control" type="text"  required readonly>
	                        </div>
                        </div>
                    </div>
                </div>
            </div>
             --> 
            <div class="form-group" id="gndiv">
				<label class="col-sm-3 control-label is-required">功能科目 ：</label>
				<div class="col-sm-8">
					<div class="input-group" >
                     	<input id="gnkmdm" name="gnkmdm" onclick="selectGnKmdmTree()" placeholder="" class="form-control" type="text" readonly>
                       <span class="input-group-addon"><i class="fa fa-search" onclick="selectGnKmdmTree()"></i></span>
                       <input id="gnkmmc" name="gnkmmc"  placeholder="" class="form-control" type="text"   readonly>
                 	</div>
				</div>
			</div>
            <div class="form-group">
				<label class="col-sm-3 control-label is-required" id="jjname">经济科目：</label>
				<div class="col-sm-8">
					 <div class="input-group">
                      	<input id="jjkmdm" name="jjkmdm" onclick="selectJJKmdmTree()" placeholder="" class="form-control" type="text"  required readonly>
                       <span class="input-group-addon"><i class="fa fa-search" onclick="selectJJKmdmTree()"></i></span>
                       <input id="jjkmmc" name="jjkmmc"  placeholder="" class="form-control" type="text"  required readonly>
                  	</div>
				</div>
			</div>
		    <div class="container-div">
		        <div class="btn-group-sm" id="toolbar" role="group">
		             <a class="btn btn-success" onclick="insertRow()">
				            <i class="fa fa-plus"></i> 新增行
				        </a>
				        <a class="btn btn-danger multiple disabled" onclick="removeRow()">
				            <i class="fa fa-remove"></i> 删除行
				        </a>
		        </div>
				<div class="row">
					<div class="col-sm-12 select-table">
						<table id="bootstrap-table"></table>
					</div>
				</div> 
			</div>
			<div class="row">
				  <div class="form-group draggable">
                       <label class="col-sm-3 control-label">拨款用途：</label>
                        <div class="col-sm-8">
                            <textarea type="text" name="bkyt" class="form-control" placeholder="请输入拨款用途"></textarea>
                      </div>
		          </div>
	         </div>
	   </form>
    </div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-table-editable-js" />
	<th:block th:include="include :: datetimepicker-js" />
	<script>
	    $("#zfrq").datetimepicker({
		   format: 'yyyy-mm-dd',
           language: 'zh-CN',
           minView: "month",
           todayBtn: false,
           autoclose: true
		});
	    $("#zfrq").datetimepicker('setDate', (new Date()) );
	    var prefix=ctx + "system/zfpzto";	   
			$(function() {
		        var options = {
	        		showSearch: false,
			        showRefresh: false,
			        showToggle: false,
			        showColumns: false,
			        pagination: false,
			        showFooter: true,
			        striped : true,
			        uniqueId: 'id',
			        height: 250,
			        editable:true,//开启编辑模式  
			        clickToSelect: true,
		            columns: [{
			            checkbox: true
			        },
					{
						field : 'id', 
						title : 'id',
						visible: false
					}, {
	                    title: '单位选择',
	                    align: 'center',
	                    align: 'left',
	                    formatter: function(value, row, index) {
	                        var actions = [];
	                        actions.push('<a class="btn btn-info  btn-xs" href="javascript:void(0)" onclick="selectHsdwTree(' + index + ')"><i class="fa fa-plus"></i>选择</a> ');
	                        return actions.join('');
	                    },
		                footerFormatter:function (value) {
	   				        return '合计:';
	   				    }
	                },{
	                    field: 'dwbm',
	                    title: '单位编码',
	                },{
	                    field: 'dwmc',
	                    title: '单位名称',
	                },
					{
						field : 'je', 
						title : '金额',
						width :200,
						editable : {
							type : 'text',
							title : '金额',
							emptytext : "录入金额",
							mode: "inline",
							onblur:"submit",
							showbuttons:true,
							validate : function(value) {
								   if (!value) return '【项目金额】不能为空';
				                    var patrn=/^([1-9]\d*\.\d{1,2}|0\.\d[1-9]|[1-9]\d*)$/;
					                if(!patrn.test(value)){
					               		 return '输入格式：最多两位小数';
					                }
							}
						},
	   				    footerFormatter:function (value) {
	   				    	var sumJe = 0;
	   				        for (var i in value) {
	   				        	if (value[i].je==undefined ||value[i].je==null ||value[i].je=="" ){
	   				        		
	   				        	}else{
	   				        	sumJe += parseFloat(value[i].je);
	   				        	}
	   				        }
	   				        return sumJe;
	   				    }
					}]
		        };
		        $.table.init(options);
		    }); 
			
				
	    /* 新增表格行 */
	    function insertRow(){
	    	var randomId = 100 + ~~(Math.random() * 100);
	    	var row={
	            	id:randomId,
	            	dwbm: '',
	            	dwmc: '',
	            	je: ''
	            }
	    	$("#" + table.options.id).bootstrapTable('append', row);
	    	$("#" + table.options.id).bootstrapTable('scrollTo', 'bottom');
	    }
	    
	    /* 删除指定表格行 */
	    function removeRow(){
	    	var ids = $.table.selectColumns("id");
	    	if (ids.length == 0) {
				$.modal.alertWarning("请至少选择一条记录");
				return;
			}
	    	$("#" + table.options.id).bootstrapTable('remove', {
	    	    field: 'id',
	    	    values: ids
	    	})
	    }
	    
		$("#bklx").change(function(){
			if ($("#bklx").val()==0){
				$("#gndiv").show();
				$("#jjname").html('经济科目：');
			}else{
				$("#gndiv").hide();
				$("#jjname").html('会计科目：');	
			}
			$("#" + table.options.id).bootstrapTable('removeAll');
		});
	    
	    /*会计科目-新增-选择父部门树*/
        function selectHsdwTree(upIndex) {
            var options = {
            	title: '选择单位'+'_'+upIndex,
                width: "380",
                url: ctx + "system/hsdw/selectHsdwTree/",
                callBack: doHsdwSubmit
            };
            $.modal.openOptions(options);
        }

        function doHsdwSubmit(index, layero){
        	var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
        	   var titile=$(".layui-layer-title")[0].innerText;
	     	   var rowIndex=0;
	     	   if (titile!=undefined){
	     		   rowIndex=titile.split('_')[1];
	     	   }
               var body = layer.getChildFrame('body', index);
               var dwbm=body.find('#treeId').val();
               var dwmc=body.find('#treeName').val();
               
               var rowskmdm = {
            		   index : rowIndex, //更新列所在行的索引
            		   field : "dwbm", //要更新列的field
            		   value : dwbm //要更新列的数据
            		   }//更新表格数据 
               $("#" + table.options.id).bootstrapTable("updateCell",rowskmdm);
         	   var rowsdwmc = {
                 		   index : rowIndex, //更新列所在行的索引
                 		   field : "dwmc", //要更新列的field
                 		   value : dwmc.split('-')[1] //要更新列的数据
                 		   }//更新表格数据 
               $("#" + table.options.id).bootstrapTable("updateCell",rowsdwmc);
               layer.close(index);
			}
        }
        
        function submitHandler() { 
	        if ($.validate.form()) {
	        	var temp1= $("#gndiv").is(":visible");//是否可见 
	        	if (temp1){
	        		 if ($("#gnkmdm").val()==''){
	        			 layer.alert("<font color='red'>功能科目代码不能为空</font>", {
		        		        icon: 0,
		        		        title: "系统提示"
		        		 })
                    	 return false; 
                     }
	        		 if ($("#gnkmmc").val()==''){
	        			 layer.alert("<font color='red'>功能科目名称不能为空</font>", {
		        		        icon: 0,
		        		        title: "系统提示"
		        		 })
                    	 return false; 
                     }
	        	}
	        	var data = $("#form-tsbk-add").serializeArray();
	        	var itemdw = $("#" + table.options.id).bootstrapTable('getData');
	        	if(itemdw.length == 0){
	        		 layer.alert("<font color='red'>请录入单位信息</font>", {
	        		        icon: 0,
	        		        title: "系统提示"
	        		 })
	        		 return false;
	        		
	        	}
	        	var dateIds = new Array();
	        	var itemje=0;
	        	$.each(itemdw, function (key, value) {
                     if (value.dwbm==''){
                    	 dateIds.push("1");
                    	 return false; 
                     }
                     if (value.je<=0){
                    	 dateIds.push("1");
                    	 return false; 
                     }
                 });
	        	if(dateIds.length>0){
	        		 layer.alert("<font color='red'>项目或项目金额不符!</font>", {
	        		        icon: 0,
	        		        title: "系统提示"
	        		 })
	        		 return;
	        	}
	        	/*for(var i=0;i<itemdw.length;i++){
	        		for(var j=i+1;j<itemdw.length;j++){
	        			if (itemdw[i].dwbm==itemdw[j].dwbm){
	        				layer.alert("<font color='red'>存在相同的单位!</font>", {
		        		        icon: 0,
		        		        title: "系统提示"
			        		})
			        		return;
	        			}
	        		}
	        	}*/
	        	
	        	var jsonitemdw=JSON.stringify(itemdw)
	        	data.push({"name": "kjkmmc", "value": jsonitemdw});
	        	$.operate.save(prefix + "/add", data);
	        }
	    }
        
        /*付款银行*/
        function selectFkyhTree() {
			var options = {
				title: '付款银行',
				width: "420",
				url: ctx + "system/dlyhwh/selectDlyhwhTree/",
				callBack: fkyhdoSubmit
			};
			$.modal.openOptions(options);
		}
		
		function fkyhdoSubmit(index, layero){
			var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
				var body = layer.getChildFrame('body', index);
    			var fkyhxx=body.find('#treeTitle').val();
    			debugger;
    			$("#jkrmc").val(fkyhxx.split("-")[2]);
    			$("#jkrzh").val(fkyhxx.split("-")[1]);
    			$("#jkryh").val(fkyhxx.split("-")[0]);
    			layer.close(index);
			}
		}
		
		 /*付款银行*/
        function selectSkyhTree() {
			var options = {
				title: '收款银行',
				width: "420",
				url: ctx + "system/gkzfzh/selectGkzfzhTree/",
				callBack: skyhdoSubmit
			};
			$.modal.openOptions(options);
		}
		
		function skyhdoSubmit(index, layero){
			var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
				var body = layer.getChildFrame('body', index);
    			var fkyhxx=body.find('#treeTitle').val();
    			$("#skrmc").val(fkyhxx.split("-")[2]);
    			$("#skrzh").val(fkyhxx.split("-")[1]);
    			$("#skryh").val(fkyhxx.split("-")[0]);
    			layer.close(index);
			}
		}
        
		/*功能科目*/
        function selectGnKmdmTree() {
        	 var options = {
    	            	title: '预算科目',
    	                width: "420",
    	                url: ctx + "system/yskm/selectYskmForlbTree/2",
    	                callBack: dognkmSubmit
    	            };
    	            $.modal.openOptions(options);
        }
		

        function dognkmSubmit(index, layero){
        	
        	var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
			   var body = layer.getChildFrame('body', index);
               var yskmdm=body.find('#treeId').val();
               var yskmdmName=body.find('#treeTitle').val();
               $("#gnkmdm").val(yskmdm);
               $("#gnkmmc").val(yskmdmName);
               layer.close(index);
			}
        } 
		
        /*功能科目*/
        function selectJJKmdmTree() { 
        	if ($("#bklx").val()==1){
       		  var options = {
                     	title: '会计科目',
                         width: "420",
                         url: ctx + "system/kmdm/selectKmdmTree/",
                         callBack: dokjkmSubmit
                     };
                     $.modal.openOptions(options);
          	}else{
	            var options = {
	            	title: '预算科目',
	                width: "420",
	                url: ctx + "system/yskm/selectYskmForlbTree/3",
	                callBack: dojjkmSubmit
	            };
	            $.modal.openOptions(options);
          	}
        }
        function dokjkmSubmit(index, layero){
        	var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
			   var body = layer.getChildFrame('body', index);
               var yskmdm=body.find('#treeId').val();
               var yskmdmName=body.find('#treeTitle').val();
               $("#jjkmdm").val(yskmdm);
               $("#jjkmmc").val(yskmdmName);
               layer.close(index);
			}
        } 
        function dojjkmSubmit(index, layero){
        	var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
			   var body = layer.getChildFrame('body', index);
               var yskmdm=body.find('#treeId').val();
               var yskmdmName=body.find('#treeTitle').val();
               $("#jjkmdm").val(yskmdm);
               $("#jjkmmc").val(yskmdmName);
               layer.close(index);
			}
        } 
		
		
		 
		function onKeyDown(event){
               var e = event || window.event || arguments.callee.caller.arguments[0];
               if(e && e.keyCode==13){ // enter 键
            	  
               }
               
           }
    </script>
</body>
</html>
